<template>
    <div class="container">
        <div class="law-box hide-in-mobile">
            <div class="law-container first-level clearfix">
                <div class="box-title fst-title">
                    <Icon type="arrow-right-b"></Icon>
                    所有分类
                </div>
                <div class="box-content">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" @click="getChild(item.id,item.children,item.depth)" :key="item.id" v-for="item in categoryList">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title">
                    机构名称
                </div>
                <div name="fade" class="box-content" tag="div">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" @click="getChild(item.id,item.children,item.depth)" :key="item.id" v-for="item in categoryList1">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title"></div>
                <div class="box-content">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" @click="getChild(item.id,item.children,item.depth)" :key="item.id" v-for="item in categoryList2">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title"></div>
                <div class="box-content">
                    <a :class="{'is-active':selectedContainer.some(x=>x==item.id)}" @click="getChild(item.id,item.children,item.depth)" :key="item.id" v-for="item in categoryList3">{{item.name}}</a>
                </div>
            </div>
            <div class="law-container clearfix">
                <div class="box-title">备注</div>
                <div class="box-content">
                    <span>{{finalSelected.content || '暂无简介'}}</span>
                </div>
            </div>
        </div>
        <div class="main-list">
            <div class="list-item clearfix" :key="statute.id" v-if="dataList.length != 0" v-for="statute in dataList">
                <div class="statute-left">
                    <span class="date">{{statute.date}}</span>
                    <span class="year-month">{{statute.year_month}}</span>
                </div>
                <div class="statute-right">
                    <div class="title ellipsis">
                        {{statute.name}}
                    </div>
                    <p class="type">分类：法律法规</p>
                    <p class="download-count">下载次数：{{statute.number.download}}</p>
                    <a href="javascript:;" class="read">阅读</a>
                </div>
            </div>
            <div class="no-more" v-if="dataList.length == 0">
                暂无相关文章
            </div>
        </div>
    </div>
</template>
<script>
    import { format,clone } from '../../utils/utils.js';
    export default{
        data(){
            return{
                q:this.$route.query.q.split('|'),
                selectedContainer:[],
                categoryList1:[],
                categoryList2:[],
                categoryList3:[],
                categoryList4:[],
                finalSelected:{},
                dataList:[],
                tempArr:[]
            }
        },
        computed:{
            categoryList(){
                return this.$store.state.lawData.children;
            },
            categoryDepth(){
                return this.$store.state.lawData.depth;
            }
        },
        mounted(){
            if(this.q){
                this.initList();
            }
            var interval = setTimeout(_=>{
                if(this.categoryList){
                    this.tempArr = clone(this.categoryList);
                    console.log(this.tempArr)
                    this.initLevel();
                    //clearInterval(interval)
                }
            },1000)
        },
        watch:{
            $route(){
                this.q = this.$route.query.q.split('|');
                this.initList();
            }
        },
        methods:{
            getChild(id,children,depth){
                this.selectedContainer[depth] = id;
                var next = `categoryList${depth+1}`;
                if(children){
                    this[next] = children;
                    for(let x = depth+1; x < this.categoryDepth; x++){
                        var n = `categoryList${x+1}`;
                        this[n] = [];
                    }
                }else{
                    this.getThis(id);
                    for(let x = depth; x < this.categoryDepth; x++){
                        this.selectedContainer.splice(x+1,this.selectedContainer.length-x+1);
                        var n = `categoryList${x+1}`;
                        this[n] = [];
                    }
                    this.$router.push({path:'/statute',query:{q:this.selectedContainer.join('|')}});
                }
            },
            initLevel(){
                // console.log(this.tempArr)
                this.q.forEach((item,index)=>{
                    this.tempArr.forEach((child,childIndex)=>{
                        if(item == child.id){
                            this.tempArr = child.children;
                            this.getChild(item,this.tempArr,index);
                        }
                    })
                })
            },
            getThis(id){
                this.$http.get('/category/' + id + '/getList').then(response => {
                    const data = response.data;
                    this.finalSelected = data.onThis;
                }).catch(err => {

                })
            },
            initList(){
                var q = clone(this.q);
                this.$http.get('/statute/list',{
                    params: {
                        category:q.pop()
                    }
                }).then(response => {
                    var data = response.data;
                    this.dataList = data.data;
                    this.dataList.forEach((item,index)=>{
                        item.date = format(item.inTimes,'dd');
                        item.year_month = format(item.inTimes,'yyyy-MM');
                    })
                }).catch(err => {

                })
            }
        }
    }
</script>
<style type="text/css" scoped>
    .container{ max-width:1200px; margin:16px auto;}
    .law-box{ border:1px solid #cdcdcd;}
    .law-container{ background:#fff; border-bottom:1px dashed #cdcdcd; background:#f7f7f7;}
    .law-container:last-of-type{ border-bottom:none;}
    .first-level{ background:#eee; border-bottom:1px solid #cdcdcd;}
    .box-title{ width:150px; text-align:center; padding:17px 0; float: left;}
    .fst-title{ border-right:1px solid #cdcdcd; background:#eee;}
    .fst-title .ivu-icon{ color:#b6b6b6; margin-right:5px;}
    .box-content{ margin-left:150px; padding-top:17px; background:#fff; min-height: 49px;}
    .box-content a,.box-content span{  margin:0 24px; margin-bottom: 17px; display:inline-block;}
    .box-content a:hover,.box-content a.is-active{ color:#0f977f;}
    .main-list{ margin-top:50px; }
    .list-item{ margin:0 95px 50px; }
    .statute-left{ background:url('../../assets/images/icon/statute.png') no-repeat; padding-top:60px; width:50px; float: left;}
    .date,.year-month{ display:block; text-align:center; color:#15ccac;}
    .date{ font-size:40px; margin:5px 0;}
    .year-month{ font-size:12px; }
    .statute-right{ margin-left:50px; padding-left:46px; padding-bottom: 50px; border-bottom:1px solid #666;}
    .title{ font-size:18px; letter-spacing:0.01rem;}
    .type,.download-count{ font-size:12px; color:#666; margin-top:12px;}
    .read{ width:160px; height:32px; display:inline-block; border:1px solid #666; border-radius:3px; display:flex; align-items:center; justify-content:center; color:#666; transition:all 0.2s linear; margin-top:24px;}
    .read:hover,.read.is-active{ background:#15ccac; color:#fff; border-color:#15ccac; }
    @media (max-width:1024px){
        .hide-in-mobile{ display:none;}
    }
    .no-more{ text-align:center; color:#999; }
</style>